<!--
 * @Description: 个人中心侧边菜单栏组件
 * @Author: Gaq
 * @Date: 2022-11-02 18:49:15
 * @LastEditTime: 2023-02-20 18:22:04
 * @LastEditors: Gaq
-->
<template>
  <el-container class="layout-container-demo" style="height: 100vh">
    <el-aside width="200px">
      <el-scrollbar>
        <div
          style="
            display: flex;
            flex-direction: column;
            align-items: center;
            height: 30vh;
          "
        >
          <img
            :src="userInfo.image"
            style="width: 100px; border-radius: 25px"
          />
          <div style="margin-top: 10px; font-size: 30px">
            {{ userInfo.name }}
          </div>
          <div class="loginOut" @click="loginOut">退出登录</div>
        </div>
        <el-menu
          router
          active-color="#409EFF"
          default-active="/commonCenter/userInfo"
        >
          <el-menu-item
            :index="item.path"
            v-for="item in noChildren"
            @click="clickMen(item)"
            ><span>{{ item.name }}</span></el-menu-item
          >
          <!-- 一级菜单  -->
          <el-sub-menu :index="item.path" v-for="item in hasChildren">
            <!-- 一级菜单的模板区域 -->
            <template #title>
              <!-- 图标 -->
              <el-icon size="20" color="#000">
                <el-icon-menu></el-icon-menu>
              </el-icon>
              <span>{{ item.name }}</span>
            </template>
            <!-- 二级菜单 -->
            <el-menu-item
              @click="clickMen(it)"
              :index="it.path"
              v-for="it in item.sub"
            >
              <template #title>
                <span>{{ it.name }}</span>
              </template>
            </el-menu-item>
          </el-sub-menu>
        </el-menu>
      </el-scrollbar>
    </el-aside>
    <el-container>
      <el-main>
        <router-view></router-view>
      </el-main>
    </el-container>
  </el-container>
</template>
  
<script  setup>
import router from "@/router";
let menuList = ref([]);
let role = ref("");
let userInfo = ref({});

let activeIndex = ref("");
onBeforeMount(() => {
  // 表示一打开这个页面，就运行这里
  role.value = localStorage.getItem("role");
  userInfo.value = JSON.parse(localStorage.getItem("user"));
  getMenuLIst(); // 获取菜单
});
const loginOut = () => {
  localStorage.clear();
  router.push({
    path: "/",
  });
};

const clickMen = (item) => {
  /* router.push({path:item.path}) */
  // console.log(item.name);
};
const noChildren = computed(() => {
  return menuList.value.filter((item) => !item.sub);
});
const hasChildren = computed(() => {
  return menuList.value.filter((item) => item.sub);
});

const getMenuLIst = () => {
  if (role.value == "common") {
    menuList.value = [
      {
        name: "账户设置",
        path: "/commonCenter/userInfo",
      },
      {
        name: "我的收藏",
        path: "/commonCenter/collection",
      },
      {
        name: "收货地址",
        path: "/commonCenter/address",
      },
      {
        name: "我的订单",
        path: "1",
        sub: [
          {
            name: "已完成",
            path: `/commonCenter/myOrder/${1}`,
          },
          {
            name: "已付款",
            path: `/commonCenter/myOrderPay/${2}`,
          },
          {
            name: "待收货",
            path: `/commonCenter/myOrderWait/${3}`,
          },
          {
            name: "待评价",
            path: `/commonCenter/myOrderEvaluate/${4}`,
          },
        ],
      },
      {
        name: "购物车",
        path: "/commonCenter/shopping",
      },
    ];
  }
  // 如果登录角色为 role = admin2
  else if (role.value == "admin2") {
    // menuList 用于在上面模板中渲染，建议 ctrl+F 看看怎么用的
    menuList.value = [
      {
        name: "admin2",
        path: "1",
        icon: "el-icon-goods",
        sub: [
          {
            name: "admin2-功能模块1",
            path: "/detail",
            icon: "",
          },
          {
            name: "admin2-功能模块2",
            path: "/detail",
            icon: "",
          },
        ],
      },
    ];
  }
};
</script>
  
  <style scoped>
.item {
  margin-top: 10px;
  margin-right: 40px;
}
.loginOut {
  cursor: pointer;
}
.layout-container-demo .el-header {
  position: relative;
  background-color: var(--el-color-primary-light-7);
  color: var(--el-text-color-primary);
}
.layout-container-demo .el-aside {
  color: var(--el-text-color-primary);
  background: var(--el-color-primary-light-8);
}
.layout-container-demo .el-menu {
  border-right: none;
}
.layout-container-demo .el-main {
  padding: 0;
}
.layout-container-demo .toolbar {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 100%;
  right: 20px;
}
</style>
  